
<div th:replace="common/IncludeTop"></div>

<div id="Content">
    <div><span class="fff"></span> <br/>

        <span class="violet">
             <div id="Welcome" th:if="${account==null}">
                  <div id="WelcomeContent">
                       <b>Welcome to MyPetStore!</b>
                  </div>
             </div>
            <div id="Welcome" th:if="${account!=null}">
                  <div id="WelcomeContentForAccount">
                      <b>Welcome&nbsp;</b>
                      <b th:text="${account.username}">Welcome to MyPetStore!</b>
                      <b>&nbsp;!</b>
                  </div>
             </div>
        </span>
        <span class="fff"></span>
    </div>


    <div id="inform" class="tip" style="display:none">
    </div>


    <head>
        <link rel="apple-touch-icon" type="image/png"
              href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"/>
        <meta name="apple-mobile-web-app-title" content="CodePen">

        <link rel="shortcut icon" type="image/x-icon"
              href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"/>

        <link rel="mask-icon" type="image/x-icon"
              href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
              color="#111"/>


        <title>CodePen - Fancy border button</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

        <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet"/>

        <style>
            @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
            #inform {
                margin: -50px 0 -50px -50px;
                width: 175px;
                height: 155px;
                background-color: #e6a13a;
                border-radius: 13px;
            }

            .button {
                --offset: 5px;
                --border-size: 3px;
                display: block;
                position: relative;
                padding: 0.2em 1.5em;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: 0;
                background: transparent;
                color: #e55743;
                text-transform: uppercase;
                letter-spacing: 0.25em;
                outline: none;
                cursor: pointer;
                font-weight: bold;
                border-radius: 0;
                box-shadow: inset 0 0 0 var(--border-size) currentcolor;
                transition: background 0.8s ease;
            }

            .button:hover {
                background: rgba(100, 0, 0, 0.03);
            }

            .button__horizontal, .button__vertical {
                position: absolute;
                top: var(--horizontal-offset, 0);
                right: var(--vertical-offset, 0);
                bottom: var(--horizontal-offset, 0);
                left: var(--vertical-offset, 0);
                transition: transform 0.8s ease;
                will-change: transform;
            }

            .button__horizontal::before, .button__vertical::before {
                content: "";
                position: absolute;
                border: inherit;
            }

            .button__horizontal {
                --vertical-offset: calc(var(--offset) * -1);
                border-top: var(--border-size) solid currentcolor;
                border-bottom: var(--border-size) solid currentcolor;
            }

            .button__horizontal::before {
                top: calc(var(--vertical-offset) - var(--border-size));
                bottom: calc(var(--vertical-offset) - var(--border-size));
                left: calc(var(--vertical-offset) * -1);
                right: calc(var(--vertical-offset) * -1);
            }

            .button:hover .button__horizontal {
                transform: scaleX(0);
            }

            .button__vertical {
                --horizontal-offset: calc(var(--offset) * -1);
                border-left: var(--border-size) solid currentcolor;
                border-right: var(--border-size) solid currentcolor;
            }

            .button__vertical::before {
                top: calc(var(--horizontal-offset) * -1);
                bottom: calc(var(--horizontal-offset) * -1);
                left: calc(var(--horizontal-offset) - var(--border-size));
                right: calc(var(--horizontal-offset) - var(--border-size));
            }

            .button:hover .button__vertical {
                transform: scaleY(0);
            }

            #Welcome {
                margin: auto;
                transform: rotateY(-20deg);
                animation: anim 10s linear infinite;
            }

            .violet {
                color: #8E94C0;
            }

            .fff {
                color: #fff;
            }


            @keyframes anim {
                0% {
                    transform: rotateY(-20deg) rotatex(10deg);
                }
                50% {
                    transform: rotateY(-10deg) rotatex(15deg);
                }
                100% {
                    transform: rotateY(-20deg) rotatex(10deg);
                }
            }

            @-webkit-keyframes anim {
                0% {
                    transform: rotateY(-20deg) rotatex(10deg);
                }
                50% {
                    transform: rotateY(-10deg) rotatex(15deg);
                }
                100% {
                    transform: rotateY(-20deg) rotatex(10deg);
                }
            }


        </style>

        <script>
            window.console = window.console || function (t) {
            };
        </script>


        <script>
            if (document.location.search.match(/type=embed/gi)) {
                window.parent.postMessage("resize", "*");
            }
        </script>
        <script>
            var xmlHttpRequest = null;

            function createXMLHttpRequest() {
                xmlHttpRequest = new XMLHttpRequest();
            }

            function mousePosition(ev) {
                ev = ev || window.event;
                if (ev.pageX || ev.pageY) {
                    return {x: ev.pageX, y: ev.pageY};
                }
                return {
                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y: ev.clientY + document.body.scrollTop - document.body.clientTop
                };
            }

            function showInform(categoryId) {


                $("#MainImageContent").mouseover(function (e) {
                    //获取鼠标位置函数
                    var mousePos = mousePosition(e);
                    var xOffset = 20;
                    var yOffset = 25;
                    $("#inform").css("position", "absolute").css("top", (mousePos.y + yOffset) + "px").css("left", (mousePos.x + xOffset) + "px");
                });
                $("#MainImageContent").mouseleave(function (e) {

                    $("#inform").css("display", "none");
                });

                sendRequest("categoryJsShow?categoryId=" + categoryId);
            }

            function sendRequest(url) {

                createXMLHttpRequest();
                xmlHttpRequest.onreadystatechange = processResponse;
                xmlHttpRequest.open("GET", url, true);
                xmlHttpRequest.send(null);

            }

            function processResponse() {
                if (xmlHttpRequest.readyState == 4) {
                    if (xmlHttpRequest.status == 200) {
                        var resp = xmlHttpRequest.responseText;
                        //显示悬浮层
                        var inform = document.getElementById("inform");
                        inform.innerText = resp;
                        inform.style.display = "block";

                    }
                }
            }


            //隐藏悬浮层
            function hiddenInform(event) {
                var informDiv = document.getElementById('inform');
                var x = event.clientX;
                var y = event.clientY;
                var divx1 = informDiv.offsetLeft;
                var divy1 = informDiv.offsetTop;
                var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
                var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
                if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
                    document.getElementById('inform').style.display = 'none';
                }
            }

        </script>

    </head>
    <div id="Main">
        <div id="Sidebar">
            <!--左侧导航栏-->
            <div id="SidebarContent">
                <button class="button">
                    <a href="/catalog/viewCategory?categoryId=FISH">FISH
                        <div class="button__horizontal"></div>
                        <div class="button__vertical"></div>
                    </a>
                    <br/>Saltwater<br/>Freshwater
                </button>
                <br/>
                <button class="button">
                    <a href="/catalog/viewCategory?categoryId=DOGS">DOG
                        <div class="button__horizontal"></div>
                        <div class="button__vertical"></div>
                    </a>
                    <br/> Various Breeds
                </button>
                <br/>
                <button class="button">
                    <a href="/catalog/viewCategory?categoryId=CATS">CAT
                        <div class="button__horizontal"></div>
                        <div class="button__vertical"></div>
                    </a>
                    <br/> Various Breeds<br/>Exotic Varieties
                </button>
                <br/>
                <button class="button">
                    <a href="/catalog/viewCategory?categoryId=REPTILES">REPTILE
                        <div class="button__horizontal"></div>
                        <div class="button__vertical"></div>
                    </a>
                    <br/> Lizards<br/> Turtles<br/> Snakes
                </button>
                <br/>
                <button class="button">
                    <a href="/catalog/viewCategory?categoryId=BIRDS">BIRD
                        <div class="button__horizontal"></div>
                        <div class="button__vertical"></div>
                    </a>
                    <br/> Exotic Varieties
                </button>
            </div>
        </div>

        <div id="MainImage">
            <div id="MainImageContent">
                <!--中间显示栏-->
                <map name="estoremap">
                    <area id="BIRDS" alt="BIRDS" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS"
                          shape="rect" onmouseover="showInform('BIRDS')" onmouseout="hiddenInform(event)"/>
                    <area id="Fish" alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory?categoryId=FISH" shape="rect"
                          onmouseover="showInform('FISH')" onmouseout="hiddenInform(event)"/>
                    <area id="Dogs" alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="rect"
                          onmouseover="showInform('DOGS')" onmouseout="hiddenInform(event)"/>
                    <area id="Reptiles" alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES"
                          shape="rect" onmouseover="showInform('REPTILES')" onmouseout="hiddenInform(event)"/>
                    <area id="Cats" alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="rect"
                          onmouseover="showInform('CATS')" onmouseout="hiddenInform(event)"/>
                    <area id="Birds2" alt="Birds2" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS"
                          shape="rect" onmouseover="showInform('BIRDS')" onmouseout="hiddenInform(event)"/>
                </map>
                <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350"/>
            </div>
        </div>
        <div id="Separator">
        </div>
    </div>
</div>



<div th:replace="common/IncludeBottom"></div>